<template>
    <div>
        <h1>使用场景:有时候在弹出表单数据用得都是一个弹框:无论是新增,编辑,查看;这时候新增与编辑还好解决;如果是查看;我们需要给每一个组件写上disabled属性;这样得话会增加很多工作量</h1>
        <h1>为了偷懒:我们这里使用了css得属性 pointer-events: all /* 阻止元素下方的交互 */</h1>
        <el-button type="primary" @click="addFun">新增</el-button>
        <el-button type="primary" @click="looFun">查看</el-button>



        <el-dialog title="信息" :visible.sync="alertShow" width="700px" append-to-body :close-on-press-escape="false"
            :close-on-click-modal="false" @close="cancelAlert">
            <el-form ref="form" :model="form" :rules="rules">
                <el-row :class="isLook ? 'diydisplay' : ''">
                    <el-col :span="12">
                        <el-form-item label="联系电话" prop="phone">
                            <el-input clearable type="number" v-model.trim="form.phone" placeholder="请输入"
                                oninput="if(value.length > 11) value=value.slice(0, 11)"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="事件确认" prop="eventStatus">
                            <el-select class="name_input" v-model="form.eventStatus" placeholder="请选择">
                                <el-option v-for="item in confirmList" :key="item.id" :label="item.value" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="saveFun">新增</el-button>
                <el-button type="primary" @click="cancelAlert">关 闭</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'ElementComponetsQuestionFormlook',

    data() {
        return {
            alertShow: false,
            form: {
                phone: "",
                eventStatus:"",
            },
            confirmList: [
                { id: 1, value: "确认" },
                { id: 2, value: "取消" },
            ],
            rules: {
                phone: [
                    { required: true, message: "请选择状态", trigger: "blur" },
                ],
                eventStatus:[
                    { required: true, message: "请选择状态", trigger: "change" },
                ],
            },
            isLook: false,//是否为查看
        };
    },

    mounted() {

    },

    methods: {
        addFun() {
            this.alertShow = true;
            this.isLook = false;
        },
        looFun() {
            this.alertShow = true;
            this.isLook = true;
        },
        saveFun() { },
        cancelAlert() {
            this.alertShow = false;
            this.isLook = false;
        }
    },
};
</script>

<style lang="less" scoped>
.diydisplay {
    margin-bottom: 10px;
}

.diydisplay::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    // 这个背景图 可以去除
    background-color: rgba(0, 0, 0, 0.1);
    pointer-events: all;
    /* 阻止元素下方的交互 */
    z-index: 999;
}
</style>